HTML5. El futuro de la Web

HTML5 es un reto en pleno proceso de cristalización. La evolución del código en los últimos años ha dado como resultado nuevas características como elementos específicos de contenido, lienzos para dibujar y reproducción de audio y vídeo. Pero una vez en el contexto ¿por dónde empezar? Este libro cuenta con toda la experiencia y conocimiento de Bill Sanders para dar los primeros pasos en el dominio de HTML5. Cubre una amplia gama de temas que incluyen la utilización del texto, gráficos, audio, vídeo y la navegación en páginas Web con código ejecutado en navegadores compatibles. Este libro, un clásico HTML5, se decanta por valores seguros. En el sitio Web de Anaya Multimedia, www.anayamultimedia.es pueden descargarse los archivos de código de ejemplo. Agradecimientos Sobre el autor Introducción Parte I. El lenguaje de la Web Parte II. Páginas, sitios y diseños Parte III. Multimedia en HTML5 Parte IV. Etiquetas HTML5 dinámicas con un poco de JavaScript y PHP Convenciones Código fuente Parte I. El lenguaje de la Web 1. Introducción a HTML5 Crear con etiquetas: visión general Incorporar los nuevos elementos HTML5 Utilizar etiquetas continuadas desde HTML4 Olvidar o reemplazar etiquetas eliminadas Elegir un navegador para interpretar HTML5 Mozilla Firefox Google Chrome Opera Apple Safari Microsoft Internet Explorer 9 Vista previa de diferentes visualizaciones Tomar el control 2. Entender las etiquetas HTML5 Analizar código Entender HTML5 y archivos relacionados Aprender qué archivos funcionan con la Web Saber cómo funcionan las etiquetas Empezar con la etiqueta HTML básica Describir su página con etiquetas Identificar las partes de una etiqueta Entender el rol de la etiqueta de comentario Anidar etiquetas Tomar el control 3. Etiquetas de texto y un poco de CSS3 Principios básicos Un poco más de organización Pensar en la estructura Añadir más estructura HTML5 Añadir estilo a texto con CSS3 Aplicar estilo a elementos HTML5 con propiedades CSS3 Hojas de estilo incorporadas Hojas de estilo externas Estilo en línea Crear clases e ID CSS3 Clases CSS3 ID CSS3 Tomar el control 4. Trabajar con valores de color Entender el color RGB Utilizar nombres Porcentajes RGB y HSL Parámetros entero decimal RGB Parámetros hexadecimales: pensar como su ordenador Añadir transparencia al color Crear un esquema de color Desde un color base Desde una imagen Integrar su paleta de color con su página Web Tomar el control Parte II. Páginas, sitios y diseños 5. Organizar una página El principio del documento HTML5 Establecer su página principal base Añadir conjunto de caracteres a su sitio con metadatos Saber cuándo necesita un script Un diseño en secciones Organizar su contenido Párrafos, divisiones y listas Agrupar sin fragmentar Figuras y títulos Organizar archivos Organización y referencia de imágenes Referencias absolutas Referencia relativa Tomar el control 6. Mostrar datos con tablas Propiedades de tabla CSS3 para HTML5 Tablas y datos tabulares Conceptos básicos de la tabla Aplicar estilo a una tabla Añadir bordes con CSS3 Aclaración de datos con colores de fondo Tablas complejas Utilizar los atributos rowspan y colspan Combinaciones prácticas de celdas en tablas Tomar el control 7. Todo sobre los vínculos El elemento link y sus atributos clave Hojas de estilo alternativas Iconos de vínculo Prefetch Otros atributos de link Vínculos de páginas Más sobre el atributo rel Relaciones de autor Tipos de vínculos jerárquicos y secuenciales Anclas de página e ID Destinos Nuevos contextos de navegación en navegadores Nuevos contextos de navegación en dispositivos móviles Utilizar iframes Anidar páginas Web Tomar el control 8. Estrategias de navegación Conceptos de navegación Web Navegación de diseñador y navegación de usuario Navegación global Utilizar listas en navegación global Menús desplegables y navegación global Utilizar JavaScript para llamar a una página vinculada Crear coherencia Navegación vertical y horizontal Aplicar pseudo-clases CSS3 Entender los mecanismos HTML5 de navegación vertical Utilizar iconos gráficos en navegación Sitios Web de una sola página con iframes Vincular con un gráfico Crear y utilizar iconos de imagen en miniatura Utilizar iframes en dispositivos móviles Tomar el control Parte III. Multimedia en HTML5 9. Imágenes Los fundamentos básicos de los archivos de imagen HTML5 Formatos y píxeles importan Scalable Vector Graphics (SVG) Graphics Interchange Format (GIF) Joint Fotographic Experts Group (JPEG) Portable Network Graphics (PNG) Preservar capas en gráficos Web Trabajar con tamaños de archivos gráficos Utilizar aplicaciones gráficas para modificar el tamaño de archivo de imagen Cambiar tamaños de archivo JPEG Buena iluminación ahorra ancho de banda Cambiar tamaños de archivo PNG y GIF Cambiar tamaños de archivo SVG Escala de grises en Internet Explorer Ubicación de imágenes y creación de páginas Web flexibles Ubicación de imágenes con el atributo align Tamaño de imagen flexible con un poco de JavaScript Aplicación para archivos SVG dinámicos desde Adobe Illustrator CS5 Tomar el control 10. Sonido Los fundamentos de audio en HTML5 Autoplay Controls Preload Loop Soporte de navegador para audio Salvado por source: Plan B Atributo type Parámetro codec Crear archivos de audio Grabadora de sonidos de Windows 7 Sound Studio en Macintosh OS X Efectos de sonido: FX en su escritorio Sonidos de transición Integrar efectos de sonido en una página Web Tomar el control 11. Vídeo Crear una página HTML5 con vídeo Vídeo y compatibilidad de navegador Hacer mío el WebM: el conversor Miro Video Convertir a 3GP: Adobe Media Encoder CS5 Crear vídeos para la Web Webcams Cámaras de vídeo pequeñas Cámaras de vídeo estándar Captura de pantalla en vídeo Atributos de video y source src poster preload loop autoplay controls width y height Tomar el control Parte IV. Etiquetas HTML5 dinámicas con un poco de JavaScript y PHP 12. Añadir suficiente JavaScript Insertar JavaScript en páginas HTML5 JavaScript en archivos externos Funciones Manejadores de evento Detectar una variedad de eventos Utilizar con cualquier elemento Utilizar el Modelo de objetos de documento Cómo funciona el DOM con su página y JavaScript Elementos HTML5 y el DOM Almacenar valores temporales Variables Tipos de datos Diferentes tipos de variables juntas Tablas Objetos Crear sus propios objetos De vuelta al Modelo de objetos de documento y objetos de navegador Tomar el control 13. Revolucionar su sitio con canvas Fundamentos básicos de canvas Una sencilla implementación de canvas Entender la cuadrícula Configuración para dibujos en canvas Realizar el dibujo Trabajar con múltiples dibujos Añadir trazos y eliminar dibujos Imágenes en canvas y sombras Abrir una imagen en el canvas Añadir una sombra Trabajar con filtros Crear dibujos complejos con canvas Líneas y movimiento Curvas Arcos Círculos y degradados Tomar el control 14. Añadir formularios Añadir un formulario Atributos generales de formulario accept-charset, enctype y novalidate action y method autocomplete name y target El formulario como parte del DOM Los muchos tipos de entrada de datos El atributo list, el tipo URL y datalist Mostrar una opción en la ventana de alerta Elementos datalist en dispositivos móviles y teclados para URL Botones de opción y casillas de verificación: elementos de entrada de datos fáciles de seleccionar